<template>
  <div>
    <el-dialog title="微信设置" :visible.sync="show" width="30%" custom-class="dialog_wx_option" @open="handleOpen">
      <h3 class="title">如本页面需要在微信中使用，请仔细设置如下信息</h3>
      <el-form ref="form" label-width="80px" :model="form" :rules="rules">
        <el-form-item prop="title" label="标题" required>
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item prop="summary" label="摘要" required>
          <el-input v-model="form.summary"></el-input>
        </el-form-item>
        <el-form-item prop="sourceId" label="封面图片" style="margin-top:12px;" required>
          <el-button @click="show2=true">选择封面</el-button>
          <img class="cover" :src="form.imgUrl" alt="">
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="handleSave">确定</el-button>
        <el-button @click="show=false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 选择图片 -->
    <el-dialog ref="dialog" title="选择图片" :visible.sync="show2" @open="SELECT_SOURCE({})">
      <dialog-image></dialog-image>
      <div slot="footer">
        <el-button type="primary" @click="handleSelectSource">确定</el-button>
        <el-button @click="show2=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapMutations, mapState, mapActions} from 'vuex'
  import dialogImage from '@/components/common/content/dialogImage'
  export default {
    components: {dialogImage},
    props: ['id'],
    data () {
      return {
        form: {
          title: '',
          summary: '',
          sourceId: '',
          imgUrl: ''
        },
        rules: {
          title: {required: true, message: '请输入标题', trigger: 'blur'},
          summary: {required: true, message: '请输入摘要', trigger: 'blur'},
          sourceId: {required: true, message: '请选择封面图片', trigger: 'blur'}
        },
        show: false,
        show2: false
      }
    },
    computed: {
      ...mapState({
        wechatList: state => state.wechatManage.wechatList,
        selected: state => state.sourceManage.selected,
        wePageWxInfo: state => state.contentManage.wePageWxInfo
      })
    },
    methods: {
      ...mapMutations(['SELECT_SOURCE']),
      ...mapActions(['setWePageWxInfo', 'getWePageWxInfo']),
      handleSelectSource () {
        this.form.sourceId = this.selected.id.toString()
        this.form.imgUrl = this.selected.url
        this.show2 = false
      },
      async handleOpen () {
        await this.getWePageWxInfo(this.id)
        this.form.title = this.wePageWxInfo.title
        this.form.summary = this.wePageWxInfo.des
        this.form.imgUrl = this.wePageWxInfo.picUrl
        this.form.sourceId = this.wePageWxInfo.sourceId && this.wePageWxInfo.sourceId.toString()
      },
      // 保存微信设置
      async handleSave () {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            const res = await this.setWePageWxInfo({
              logicId: this.id,
              sourceId: this.form.sourceId,
              title: this.form.title,
              des: this.form.summary
            })
            if (res.data.code === 1) {
              this.$message.success('保存成功')
              this.show = false
              this.$emit('save')
            }
          }
        })
      }
    }
  }
</script>
<style lang="scss">
  .dialog_wx_option{
    .title{margin-bottom:20px;font-weight:700;font-size:14px}
    .cover{width:100px;height:100px;border-radius:4px;}

  }
</style>
